<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
    body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    }
    .container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: auto;
    }
    h1 {
    text-align: center;
    margin-bottom: 30px;
    }
    .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    }
    .btn-primary:hover {
    background-color: #0056b3;
    }
    table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    }
    th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    }
    th {
    background-color: #f7f7f7;
    }
    .table-hover tbody tr:hover {
    background-color: #eaeaea;
    }
    /* 自定义操作列样式 */
    .btn btn-sm btn-primary editBookBtn {
    text-align: center;
    }
    .btn btn-sm btn-primary editBookBtn {
    color: #007bff;
    cursor: pointer;
    text-decoration: none;
    }
    .btn btn-sm btn-primary editBookBtn:hover {
    text-decoration: underline;
    }
    </style>
</head>
<body>
<div class="container mt-4">
    <!-- 添加图书按钮 -->
    <button id="addBookButton" class="btn btn-primary mb-3">添加图书</button>

    <!-- 表格显示图书列表 -->
    <table class="table table-hover">
        <thead>
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>封面</th>
            <th>分类</th>
            <th>作者</th>
            <th>库存</th>
            <th>已借出次数</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="booksList">
        <!-- 书籍列表将通过JavaScript动态加载 -->
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        // 加载图书列表
        loadBooks();

        // 绑定添加图书按钮事件
        $('#addBookButton').click(function() {
            window.location.href = 'addbook'; // 跳转到添加图书页面
        });

        // AJAX请求加载图书列表
        function loadBooks() {
            $.ajax({
                url: '/api/v1/books',
                type: 'GET',
                success: function(books) {
                    var booksHtml = '';
                    $.each(books, function(index, book) {
                        booksHtml += `
                            <tr>
                                <td>${book.id}</td>
                                <td>${book.bookName}</td>
                                <td><img src="${book.bookPhoto}" alt="封面" class="img-fluid img-thumbnail" style="max-width: 100px;"></td>
                                <td>${book.category}</td>
                                <td>${book.author}</td>
                                <td>${book.totalStock}</td>
                                <td>${book.borrowedCount}</td>
                                <td>${book.description}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary editBookBtn" data-id="${book.id}">修改</button>
                                    <button class="btn btn-sm btn-primary editBookBtn" data-id="${book.id}">删除</button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#booksList').html(booksHtml);
                },
                error: function() {
                    alert('无法加载图书列表');
                }
            });
        }

        // 绑定修改图书事件
        $('#booksList').on('click', '.editBookBtn', function() {
            var bookId = $(this).data('id');
            window.location.href = '/editbook?bookId=' + bookId; // 跳转到修改图书页面
        });

        // 绑定删除图书事件
        $('#booksList').on('click', '.deleteBookBtn', function() {
            var bookId = $(this).data('id');
            if (confirm('确定要删除图书吗？')) {
                $.ajax({
                    url: '/api/v1/books/' + bookId,
                    type: 'DELETE',
                    success: function() {
                        alert('图书删除成功');
                        loadBooks(); // 刷新图书列表
                    },
                    error: function() {
                        alert('删除图书失败');
                    }
                });
            }
        });
    });
</script>
</body>
</html>